<!-- 推荐歌单页面 -->
<template>
  <div class="recommend">
    <!-- 推荐插槽 -->
    <titleBorder>编辑推荐</titleBorder>
    <!-- 推荐列表 -->
    <div class="remd-lists">
      <div
        class="remd-list"
        v-for="item in recommendList.slice(0, 6)"
        :key="item.id"
        @click="showDetail(item)"
      >
        <imgItem :item="item"></imgItem>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>

    <!-- 推荐列表详情 -->
    <div class="showDetail">
      <songListDetails
        v-if="isShowDetail"
        @showDetail="showDetail"
        @play1="$emit('play2', $event)"
      ></songListDetails>
    </div>

    <!-- 最新音乐插槽 -->
    <titleBorder>最新音乐</titleBorder>
    <musicList :musicList="newSongs" @play="$emit('play1', $event)"></musicList>
  </div>
</template>

<script>
import musicList from "../components/musicList.vue";
import imgItem from "../components/imgItem.vue";
import titleBorder from "../components/titleBorder.vue";
import songListDetails from "@/components/songListDetails.vue";
export default {
  name: "recommend",
  data() {
    return {
      //推荐歌单
      recommendList: [],
      //最新音乐
      newSongs: [],
      isShowDetail: false,
    };
  },
  computed: {
    newRecommendList() {
      return this.recommendList.slice(0, 6);
    },
  },
  components: {
    titleBorder,
    imgItem,
    musicList,
    songListDetails,
  },
  methods: {
    // 获取推荐歌单
    getRecommendList() {
      this.$axios.get("/personalized").then((res) => {
        this.recommendList = res.data.result;
        // console.log(this.recommendList);
      });
    },
    // 获取最新音乐
    getnewSongs() {
      this.$axios
        .get("/personalized/newSong")
        .then((res) => {
          this.newSongs = res.data.result;
          // console.log(this.newSongs);
        })
        .catch((error)=> {
          if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log("推荐音乐页面 recommend 获取推荐音乐错误，请求发送成功，但返回状态码异常");
            console.log("返回体数据==>",error.response.data);
            console.log("返回状态代码==>",error.response.status);
            console.log("返回头==>",error.response.headers);
          } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            // 而在node.js中是 http.ClientRequest 的实例
            console.log("推荐音乐页面 recommend 获取推荐音乐错误，请求发送失败");
            console.log("此次发送的请求==>",error.request);
          } else {
            // 发送请求时出了点问题
            console.log("推荐音乐页面 recommend 获取推荐音乐错误");
            console.log("问题错误==>", error.message);
          }
          console.log("error.config==>",error.config);
        });
    },
    showDetail(item) {
      if (!this.isShowDetail) this.$store.commit("GETITEM", item);
      this.isShowDetail = !this.isShowDetail;
    },
  },
  created() {
    this.getRecommendList();
    this.getnewSongs();
  },
};
</script>

<style lang="scss" scoped>
.recommend {
  .remd-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .remd-list {
      width: 33%;
      .name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 6px 2px 0 6px;
        min-height: 30px;
        line-height: 1.2;
        font-size: 13px;
      }
    }
  }
  .showDetail {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
  }
}
</style>


